<template>
  <div class="user-management-container">
    <!-- 顶部操作栏 -->
    <div class="top-action-bar boxWrapper">
      <div class="left-actions">
        <el-cascader
          :options="companyTreeMenu"
          :props="{ checkStrictly: true, value: 'orgid', label: 'orgname', children: 'children' }"
          clearable
          placeholder="选择公司/部门"
          style="width: 360px"
          v-model="userOrgId"
          size="medium"
          @change="handleChangeUserOrgid"
        ></el-cascader>
        
        <el-input
          placeholder="搜索用户..."
          prefix-icon="el-icon-search"
          v-model="searchKeyword"
          style="width: 250px; margin-left: 15px"
          @input="handleSearch"
          clearable
          size="medium"
        ></el-input>
      </div>
      
      <div class="right-actions">
        <el-button 
          type="primary" 
          size="small" 
          @click="userDialogVisible = true" 
          icon="el-icon-plus"
          v-if="showRoleAdd"
        >
          新增用户
        </el-button>
      </div>
    </div>

    <!-- 用户列表 -->
    <div class="user-list-container">
      <div v-if="loading" class="loading-container">
        <i class="el-icon-loading"></i>
        <span>加载中...</span>
      </div>
      
      <div v-else-if="filteredUserList.length === 0" class="empty-state">
        <i class="el-icon-user-solid"></i>
        <p>暂无用户数据</p>
      </div>
      
      <div v-else class="user-cards">
        <el-card 
          v-for="user in filteredUserList" 
          :key="user.id" 
          class="user-card"
          shadow="hover"
        >
          <div class="card-header">
            <div class="user-avatar">
              <el-avatar :style="{ backgroundColor: user.gender === 1 ? '#409EFF' : '#F56C6C' }">
                {{ user.name ? user.name.charAt(0) : 'U' }}
              </el-avatar>
            </div>
            <div class="user-info">
              <h4 class="user-name">
                {{ user.name }}
                <el-tag 
                  size="mini"
                  v-if="user.isAdmin === 1"
                  style="margin-left: 10px;"
                >
                 管理员
                </el-tag>
             </h4>
              <div class="user-details">
                <el-tag 
                  :type="user.gender === 1 ? '' : 'success'" 
                  size="mini"
                >
                  {{ user.gender === 1 ? '男' : '女' }}
                </el-tag>
                <span class="employee-no">工号：{{ user.employeeNo || '--'}}</span>
              </div>
            </div>
          </div>
          
          <div class="card-content">
            <div class="info-row">
              <i class="el-icon-office-building"></i>
              <span class="info-label">部门:</span>
              <span class="info-value">{{ user.departmentName || '未分配' }}</span>
            </div>
            <div class="info-row">
              <i class="el-icon-user"></i>
              <span class="info-label">登录名:</span>
              <span class="info-value">{{ user.userName }}</span>
            </div>
            <div class="info-row">
              <i class="el-icon-message"></i>
              <span class="info-label">邮箱:</span>
              <span class="info-value">{{ user.email || '未填写'}}</span>
            </div>
            <div class="info-row">
              <i class="el-icon-phone"></i>
              <span class="info-label">电话:</span>
              <span class="info-value">
                {{ user.phoneNo || '未填写' }}
                <el-tooltip class="item" effect="dark" content="家庭电话" lacement="top-start">
                   <span v-if="user.homeTel">/{{ user.homeTel}}</span>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="办公电话" lacement="top-start">
                   <span v-if="user.officeTel">/{{ user.officeTel}}</span>
                </el-tooltip>
              </span>
            </div>
            <div class="info-row">
              <i class="el-icon-location-outline"></i>
              <span class="info-label">地址:</span>
              <span class="info-value">
                {{ user.address || '未填写' }}
                <span v-if="user.postalCode">/{{ user.postalCode }}</span>
              </span>
            </div>
            <div class="info-row">
              <i class="el-icon-more"></i>
              <span class="info-label">备注:</span>
              <span class="info-value">
                {{ user.remark || '未填写' }}
              </span>
            </div>
          </div>
          
          <div class="card-actions">
            <el-link 
              type="primary" 
              icon="el-icon-edit" 
              @click="handleDJTUserDialog(user)"
              v-if="showRoleEdit"
              :underline="false"
            >
              关联电建通
            </el-link>
            <el-link 
              type="primary" 
              icon="el-icon-edit" 
              @click="handleEditUserDialog(user)"
              v-if="showRoleEdit"
              :underline="false"
            >
              编辑
            </el-link>
            <el-link 
              type="danger" 
              icon="el-icon-delete" 
              @click="handleDelUserDialog(user)"
              v-if="showRoleDel"
              :underline="false"
            >
              删除
            </el-link>
            <el-link 
              type="success" 
              icon="el-icon-setting" 
              @click="handleSetPassword(user)"
              v-if="showRoleEdit"
              :underline="false"
            >
              密码
            </el-link>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 用户设置对话框 -->
    <el-dialog 
      :title="editUser ? '编辑用户' : '新增用户'" 
      :visible.sync="userDialogVisible" 
      width="800px" 
      v-dialogDrag 
      :before-close="handleCancelDialog"
    >
      <el-form 
        ref="userDialoForm" 
        :model="userDialoForm" 
        label-width="100px" 
        :rules="rules"
        class="user-form"
      >
        <div class="form-row">
          <el-form-item label="公司/部门" prop="dept_Id">
            <el-cascader
              :options="companyTreeMenu"
              :props="{ checkStrictly: true, value: 'orgid', label: 'orgname', children: 'children' }"
              clearable 
              style="width:100%"
              v-model="userDialoForm.dept_Id"
              placeholder="请选择公司/部门"
            ></el-cascader>
          </el-form-item>
        </div>
        
        <div class="form-row">
          <el-form-item label="姓名" required prop="userTrueName">
            <el-input 
              v-model="userDialoForm.userTrueName" 
              placeholder="请输入姓名"
              style="width:100%"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="工号">
            <el-input 
              v-model="userDialoForm.employeeNo" 
              placeholder="请输入工号"
              style="width:100%"
            ></el-input>
          </el-form-item>
        </div>
        
        <div class="form-row">
          <el-form-item label="性别" required prop="gender">
            <el-radio-group v-model="userDialoForm.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="管理员" required prop="isAdmin">
            <el-radio-group v-model="userDialoForm.isAdmin">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        
        <div class="form-row">
          <el-form-item label="电话号码">
            <el-input 
              v-model="userDialoForm.phoneNo" 
              placeholder="请输入电话号码" 
              maxlength="11"
              style="width:100%"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="邮箱">
            <el-input 
              v-model="userDialoForm.email" 
              placeholder="请输入邮箱"
              style="width:100%"
            ></el-input>
          </el-form-item>
        </div>
        
        <div class="form-row">
          <el-form-item label="家庭电话">
            <el-input 
              v-model="userDialoForm.homeTel" 
              placeholder="请输入家庭电话" 
              maxlength="11"
              style="width:100%"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="办公电话">
            <el-input 
              v-model="userDialoForm.officeTel" 
              placeholder="请输入办公电话" 
              maxlength="11"
              style="width:100%"
            ></el-input>
          </el-form-item>
        </div>
        
        <div class="form-row">
          <el-form-item label="登录名" required prop="userName">
            <el-input 
              v-model="userDialoForm.userName" 
              placeholder="请输入登录名"
              style="width:100%"
            ></el-input>
          </el-form-item>
          
          <el-form-item v-if="!editUser" label="邮编">
            <el-input 
              v-model="userDialoForm.postalCode" 
              placeholder="请输入邮编"
              style="width:100%"
            ></el-input>
          </el-form-item>
        </div>
        
        <div v-if="!editUser" class="form-row">
          <el-form-item label="密码" prop="userPwd">
            <el-input 
              v-model="userDialoForm.userPwd" 
              placeholder="请输入密码" 
              show-password
              style="width:100%"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="确认密码" prop="confirmUserPwd">
            <el-input 
              v-model="userDialoForm.confirmUserPwd" 
              placeholder="请确认密码" 
              show-password
              style="width:100%"
            ></el-input>
          </el-form-item>
        </div>
        
        <div class="form-row-full">
          <el-form-item label="地址">
            <el-input 
              v-model="userDialoForm.address" 
              placeholder="请输入地址" 
              type="textarea" 
              :rows="2"
              style="width:100%"
            ></el-input>
          </el-form-item>
        </div>
        
        <div class="form-row-full">
          <el-form-item label="备注">
            <el-input 
              v-model="userDialoForm.remark" 
              placeholder="请输入备注" 
              type="textarea" 
              :rows="2"
              style="width:100%"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      
      <div class="dialog-footer">
        <el-button @click="handleCancelDialog" size="small" class="cancel-btn" icon="el-icon-circle-close">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleSaveDialog" 
          size="small"
          :loading="saving"
          icon="el-icon-circle-check"
          class="confirm-btn"
        >
          {{ saving ? '保存中...' : '保存配置' }}
        </el-button>
      </div>
    </el-dialog>

    <!-- 设置密码对话框 -->
    <el-dialog
      title="设置密码"  
      v-dialogDrag 
      :visible.sync="setPasswordDialog" 
      width="500px" 
      :before-close="handleCancelPassword"
      class="confirm-btn"
    >
      <el-form 
        ref="passwordForm" 
        :model="passwordForm" 
        label-width="100px" 
        size="medium" 
        :rules="rulesPassword"
      >
        <el-form-item label="登录名" prop="userName">
          <el-input 
            v-model="passwordForm.userName"  
            placeholder="请输入登录名"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldUserPwd">
          <el-input 
            v-model="passwordForm.oldUserPwd"  
            placeholder="请输入旧密码" 
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newUserPwd">
          <el-input 
            v-model="passwordForm.newUserPwd"  
            placeholder="请输入新密码" 
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmUserPwd">
          <el-input 
            v-model="passwordForm.confirmUserPwd"  
            placeholder="请确认密码" 
            show-password
          ></el-input>
        </el-form-item>
      </el-form> 
      
      <div class="dialog-footer">
        <el-button @click="handleCancelPassword" size="small" class="cancel-btn" icon="el-icon-circle-close">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleSavePassword" 
          size="small"
          :loading="savingPassword"
          icon="el-icon-circle-check"
          class="confirm-btn"
        >
          {{ savingPassword ? '保存中...' : '保存' }}
        </el-button>
      </div>
    </el-dialog>


    <el-dialog
      title="电建通关联设置"  v-dialogDrag :visible.sync="djtDialogVisible" width="1200px" :before-close="handleCloseDJTuser">
      <el-table :data="djtUsersList" border width="100%" :header-cell-style="{background:'#f5f7fa'}" height="500px" highlight-current-row @current-change="handleCurrentChangeDJTuser">
          <el-table-column  label="多流域坝群健康平台" align="center">
            <el-table-column prop="sys_UserName" label="用户名"></el-table-column>
            <el-table-column prop="sys_Name" label="用户姓名"></el-table-column>
            <el-table-column prop="sys_CompanyName" label="公司名称"></el-table-column>
            <el-table-column prop="sys_DepartmentName" label="部门名称"></el-table-column>
          </el-table-column>     
          <el-table-column prop="sys_UserName" label="登录名"></el-table-column>
          <el-table-column prop="cn" label="用户ID"></el-table-column>
          <el-table-column prop="sn" label="用户姓名"></el-table-column>
          <el-table-column prop="usermail" label="用户邮箱"></el-table-column>
          <el-table-column prop="employeebirthday" label="用户生日"></el-table-column>
          <el-table-column prop="employeesex" label="用户性别">
            <template slot-scope="scope">
                <div v-if="scope.row.gender == 1">男</div>
                <div v-else-if="scope.row.gender == 2">女</div>
            </template>
          </el-table-column>
          <el-table-column prop="emppositionName" label="职务"></el-table-column>
          <el-table-column prop="emppositionCode" label="岗位"></el-table-column>
          </el-table>
          <div class="dialog-footer">
             <el-button @click="handleCloseDJTuser" size="small" class="cancel-btn" icon="el-icon-circle-close">取消</el-button>
            <el-button type="primary" size="small" @click="handleSaveDJTUser" icon="el-icon-circle-check" class="confirm-btn">保存配置</el-button>
          </div>
    </el-dialog>
  </div>
</template>

<script>
import { QueryUserList, AddUser, UpdateUser, getORGByUser, DelUserList, ModifyUserPwdForce,getAllUsersDJT,setLinkDJT } from '@/api/https'

export default {
  props: {
    showRoleAdd: {
      type: Number,
      default: 0
    },
    showRoleEdit: {
      type: Number,
      default: 0
    },
    showRoleDel: {
      type: Number,
      default: 0
    }
  },
  data() {
    // 密码确认验证规则
    const validatePassConfirm = (rule, value, callback) => {
      if (value !== this.passwordForm.newUserPwd) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    
    return {
      userList: [],
      filteredUserList: [],
      userOrgId: '',
      searchKeyword: '',
      editUser: false,
      userDialoForm: {
        gender: 1,
        isAdmin: 0
      },
      userDialogVisible: false,
      companyTreeMenu: [],
      loading: false,
      saving: false,
      savingPassword: false,
      rules: {
        userTrueName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        isAdmin: [{ required: true, message: '请选择是否管理员', trigger: 'change' }],
        userName: [{ required: true, message: '请输入登录名', trigger: 'blur' }],
        userPwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        confirmUserPwd: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validatePassConfirm, trigger: 'blur' }
        ]
      },
      passwordForm: {},
      setPasswordDialog: false,
      rulesPassword: {
        userName: [{ required: true, message: '请输入登录名', trigger: 'blur' }],
        oldUserPwd: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        newUserPwd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        confirmUserPwd: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validatePassConfirm, trigger: 'blur' }
        ]
      },
      djtDialogVisible:false,
      djtUsersList:[],
      DJTselectID:'',
      sys_id:''
    }
  },
  mounted() {
    this.onGetUserList()
    this.getCompanyList()
  },
  methods: {
    getCompanyList() {
      getORGByUser().then(res => {
        if (res.isSuccess) {
          this.companyTreeMenu = res.data
        } else {
          this.companyTreeMenu = []
        }
      })
    },
    onGetUserList() {
      this.loading = true
      QueryUserList({
        name: '',
        OrgID: this.userOrgId
      }).then(res => {
        this.loading = false
        if (res.isSuccess) {
          this.userList = res.data || []
          this.filteredUserList = [...this.userList]
        } else {
          this.$message.error(res.errorMessage || '获取用户列表失败')
        }
      }).catch(() => {
        this.loading = false
        this.$message.error('获取用户列表失败')
      })
    },
    handleChangeUserOrgid(val) {
      if (val && val.length > 0) {
        this.userOrgId = val[val.length - 1]
      } else {
        this.userOrgId = ''
      }
      this.onGetUserList()
    },
    handleSearch() {
      if (!this.searchKeyword) {
        this.filteredUserList = [...this.userList]
        return
      }
      
      const keyword = this.searchKeyword.toLowerCase()
      this.filteredUserList = this.userList.filter(user => 
        (user.name && user.name.toLowerCase().includes(keyword)) ||
        (user.userName && user.userName.toLowerCase().includes(keyword)) ||
        (user.employeeNo && user.employeeNo.toLowerCase().includes(keyword)) ||
        (user.phoneNo && user.phoneNo.includes(keyword))
      )
    },
    refreshData() {
      this.onGetUserList()
      this.getCompanyList()
    },
    handleEditUserDialog(data) {
      this.editUser = true
      const _data = { ...data }
      _data.userTrueName = data.name
      this.userDialoForm = _data
      this.userDialogVisible = true
    },
    handleCancelDialog() {
      this.userDialogVisible = false
      this.$nextTick(() => {
        this.userDialoForm = {
          gender: 1,
          isAdmin: 0
        }
        this.editUser = false
        this.$refs.userDialoForm && this.$refs.userDialoForm.clearValidate()
      })
    },
    handleSaveDialog() {
      this.$refs['userDialoForm'].validate((valid) => {
        if (valid) {
          this.saving = true
          
          const editData = { ...this.userDialoForm }
          let dept_Id = 0
          if (editData.dept_Id && typeof editData.dept_Id === 'number') {
            dept_Id = editData.dept_Id
          } else if (editData.dept_Id && typeof editData.dept_Id === 'object') {
            dept_Id = this.userDialoForm.dept_Id[this.userDialoForm.dept_Id.length - 1]
          }
          
          if (this.editUser) {
            editData.dept_Id = dept_Id
            UpdateUser(editData).then(res => {
              this.saving = false
              if (res.isSuccess) {
                this.$message.success('用户信息更新成功')
                this.handleCancelDialog()
                this.onGetUserList()
              } else {
                this.$message.error(res.errorMessage || '更新用户信息失败')
              }
            }).catch(() => {
              this.saving = false
              this.$message.error('更新用户信息失败')
            })
          } else {
            const { userTrueName, employeeNo, email, homeTel, gender, officeTel, phoneNo, address, postalCode, userPwd, confirmUserPwd, remark, state, userName, isAdmin } = this.userDialoForm
            const _data = {
              userTrueName: userTrueName || '',
              employeeNo: employeeNo || '',
              dept_Id: dept_Id || 0,
              email: email || '',
              homeTel: homeTel || '',
              gender: gender || '',
              officeTel: officeTel || '',
              phoneNo: phoneNo || '',
              address: address || '',
              postalCode: postalCode || '',
              userName: userName || '',
              userPwd: userPwd || '',
              confirmUserPwd: confirmUserPwd || '',
              remark: remark || '',
              state: state || 0,
              isAdmin: isAdmin || 0
            }
            AddUser(_data).then(res => {
              this.saving = false
              if (res.isSuccess) {
                this.$message.success('用户添加成功')
                this.handleCancelDialog()
                this.onGetUserList()
              } else {
                this.$message.error(res.errorMessage || '添加用户失败')
              }
            }).catch(() => {
              this.saving = false
              this.$message.error('添加用户失败')
            })
          }
        } else {
          this.$message.warning('请完善表单信息')
          return false
        }
      })
    },
    handleDelUserDialog(data) {
      this.$confirm(`确认要删除用户 "${data.name}" 吗？此操作不可撤销。`, '提示', {
        type: 'warning',
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        confirmButtonClass: 'el-button--danger'
      }).then(() => {
        DelUserList(data.id).then(res => {
          if (res.isSuccess) {
            this.$message.success('用户删除成功')
            this.onGetUserList()
          } else {
            this.$message.error(res.errorMessage || '删除用户失败')
          }
        }).catch(() => {
          this.$message.error('删除用户失败')
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleSetPassword(data) {
      this.passwordForm = {
        userName: data.userName
      }
      this.setPasswordDialog = true
    },
    handleCancelPassword() {
      this.setPasswordDialog = false
      this.$nextTick(() => {
        this.passwordForm = {}
        this.$refs.passwordForm && this.$refs.passwordForm.clearValidate()
      })
    },
    handleSavePassword() {
      this.$refs['passwordForm'].validate((valid) => {
        if (valid) {
          this.savingPassword = true
          ModifyUserPwdForce(this.passwordForm).then(res => {
            this.savingPassword = false
            if (res.isSuccess) {
              this.$message.success('密码修改成功')
              this.handleCancelPassword()
            } else {
              this.$message.error(res.errorMessage || '密码修改失败')
            }
          }).catch(() => {
            this.savingPassword = false
            this.$message.error('密码修改失败')
          })
        } else {
          this.$message.warning('请完善表单信息')
          return false
        }
      })
    },
    handleDJTUserDialog(data){
      this.sys_id = data.id
      getAllUsersDJT().then(res=>{
        if(res.isSuccess){
          this.djtDialogVisible = true
          this.djtUsersList = res.data
        }else{
          this.$message.error(res.errorMessage)
        }
      })
    },
    handleCurrentChangeDJTuser(data){
      this.DJTselectID = data.Id
    },
    handleCloseDJTuser(){
        this.DJTselectID = ''
        this.sys_id = ''
        this.djtDialogVisible = false
    },
    handleSaveDJTUser(){
      if(this.DJTselectID == ''){
        this.$message.error('请选择关联用户!')
        return false
      }else{
        setLinkDJT({
          id:this.DJTselectID,
          sys_id:this.sys_id
        }).then(res=>{
          if(res.isSuccess){
            this.handleCloseDJTuser()
          }else{
            this.$message.error(res.errorMessage)
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.user-management-container {
  height: calc(100vh - 180px);
  margin-top: 10px;
}

.top-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  
  .left-actions {
    display: flex;
    align-items: center;
  }
  
  .right-actions {
    display: flex;
    gap: 10px;
  }
}

.user-list-container {
    height: calc(100vh - 250px);
    margin-top: 10px;
    overflow: auto;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  
  i {
    font-size: 32px;
    color: #409EFF;
    margin-bottom: 10px;
  }
  
  span {
    color: #909399;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  
  i {
    font-size: 48px;
    color: #C0C4CC;
    margin-bottom: 15px;
  }
  
  p {
    color: #909399;
    margin-bottom: 20px;
  }
}

.user-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 10px;
}

.user-card {
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    
    .user-avatar {
      margin-right: 15px;
    }
    
    .user-info {
      flex: 1;
      
      .user-name {
        margin: 0 0 5px 0;
        font-size: 16px;
        color: #303133;
      }
      
      .user-details {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .employee-no {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
  
  .card-content {
    .info-row {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      font-size: 13px;
      
      i {
        margin-right: 8px;
        color: #C0C4CC;
        width: 16px;
        text-align: center;
      }
      
      .info-label {
        color: #606266;
        margin-right: 5px;
        min-width: 50px;
      }
      
      .info-value {
        color: #303133;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  
  .card-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #EBEEF5;
  }
}

.user-form {
  .form-row {
    display: flex;
    gap: 20px;
    
    .el-form-item {
      flex: 1;
    }
  }
  
  .form-row-full {
    .el-form-item {
      width: 100%;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>